<template>
<div class='menus'>
    <form class="myroles">
        <p v-for="item in rolos" :key="item.r_id" @click="changeMenusData(item.r_name)">
            <input type="radio" name="question1" :checked="item.flag">
            <span>{{item.r_name}}</span>
        </p>
    </form>
    <Tree :data="baseData" show-checkbox></Tree>
</div>
</template>

<script>
import conf from '@/api/apiConf'
export default {
  name: 'menus',
  data: () => ({
    rolos: [],
    menus: [
        '权限管理'
    ],
    baseData: [{
            expand: true,
            selected:true,
            checked:true,
            title: '管理系统',
            children: []
        }]
  }),
  created() {
    this.GetAllRole()
    this.getMenus()
  },
  watch: {
    baseData:{
     deep:true,
     handler:function(newV,oldV){
     }
   }
  },
  methods: {
    async GetAllRole() {
      try {
       this.$http.get(conf.GetAllRole).then(res=>{
           this.rolos=this.dealRolesData(res.data.data,0);
       })
      } catch (error) {
        console.log('数据请求失败')
      }
    },
    async getMenus() {
      try {
        const {
          data
        } = await this.$http.get(conf.getMenus)
        this.baseData[0].children = this.dealMenusData(data)
      } catch (error) {
        console.log('error')
      }
    },
    aclick(name) {
    },
    dealMenusData(arr){
        arr.forEach(el => {
            el.checked=true;
            el.expand=true;
            el.title=el.text;
            if(el.children){
                this.dealMenusData(el.children)
            }
        });
        return arr;
    },
    changeMenusData(content){
        this.rolos.forEach((el,index)=>{
            if(el.r_name==content){
                this.dealRolesData(this.rolos,index)
            }
        })
        if(content=='超级管理员'){
            this.dealMenusData(this.baseData[0].children)
        }else if(content=='管理员'){
            console.log('点击了管理员');
            this.dealMenusData(this.baseData[0].children)
        }else{
            this.baseData[0].selected=false;
            this.baseData[0].checked=false;
            this.changeMenusBuyRoles(this.baseData[0].children,content)
        }
        console.log(this.baseData);
    },
    dealRolesData(arr,num){
        arr.forEach((el,index) => {
            if(index==num){
                el.flag=true;
            }else{
                el.flag=false;
            }
        });
        return arr;
    },
    changeMenusBuyRoles(arr,role){
        arr.forEach(el=>{
            if(el.text==role){
                console.log('role自己',role);
                el.expand= true;
                el.selected=true;
                el.checked=true;
                if(el.children){
                    this.dealChidren(el.children,true)
                }
            }else{
                console.log('其他',role);
                el.expand= false;
                el.selected=false;
                el.checked=false;
                if(el.children){
                    this.dealChidren(el.children,false)
                }
            }
        })
    },
    dealChidren(arr,booleans){
        arr.forEach(el=>{
            el.selected=booleans,
            el.checked=booleans
        })
    }
  }
}
</script>

<style lang="less" scoped>
    .menus{
        position: relative;
    }
    .myroles{
        cursor: pointer;
        margin-top: 20px;
        padding: 10px 20px;
        width: 180px;
    }
    .myroles p{
        margin-bottom:10px;
        width: 100%;
        height:30px;
        font-size: 20px;
        border: 1px solid #333333;
        border-radius: 6px;
        background-color: #f0f0f0;
    }
    .myroles p input{
        margin-left: 5px;
        width: 15px;
        height: 15px;
    }
    .myroles p span{
        margin-left: 10px;
    }
    .ivu-tree{
        position: absolute;
        left: 200px;
        top: 10px;
    }
</style>
